/* Button */
.button {
	text-decoration: none;
	border-color:#888;
	border-color:rgba(0, 0, 0, 0.56);
	cursor: pointer;
	outline: none;
	color:#111;
	font-family:"Lucida Grande","Lucida Sans","Lucida Sans Unicode","Segoe UI",Verdana,sans-serif;
	display:inline-block;
	vertical-align:top;
	position:relative;
	font-size:12px;
	font-weight:bold;
	text-align:center;
	background-color:#aaa;
	background-image:url(gradient.png);
	background-image: -moz-linear-gradient(top, rgba(255,255,255,.75), rgba(255,255,255,0));
	background-image: -o-linear-gradient(top, rgba(255,255,255,.75), rgba(255,255,255,0));
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.75)), to(rgba(255,255,255,0)));
	background-image: linear-gradient(top, rgba(255,255,255,.75), rgba(255,255,255,0));
	background-repeat:repeat-x;
	text-shadow:1px 1px 0 rgba(255,255,255,.67);
	line-height:2;
	margin:0 0 2em 0em;
	padding:0 1em;
	height:2em;
	-moz-box-shadow:1px 1px 0 rgba(255,255,255,.5) inset, -1px -1px 0 rgba(255,255,255,.5) inset;
	-webkit-box-shadow:1px 1px 0 rgba(255,255,255,.5) inset, -1px -1px 0 rgba(255,255,255,.5) inset;
	box-shadow:1px 1px 0 rgba(255,255,255,.5) inset, -1px -1px 0 rgba(255,255,255,.5) inset;
	/** Make the text unselectable **/
	-moz-user-select: none;
	-webkit-user-select: none;
}
.button, .button:after {
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	border-width:1px;
	border-style:solid;

}
.button:after {
	display:block;
	position:absolute;
	content:' ';
	width:100%;
	height:100%;
	border-color: transparent transparent #ccc;
	border-color: transparent transparent rgba(255, 255, 255, 0.67);
	bottom:-2px;
	left:-1px;
}
.button:hover, .button:focus {
	background-color:#a8c0cb;
}
.button:active {
	line-height:2.2;
	-moz-box-shadow
		:0 .33em 1em rgba(0,0,0,.67) inset,
		1px 1px 0 rgba(255,255,255,.25) inset, 
		-1px -1px 0 rgba(255,255,255,.25) inset;
	-webkit-box-shadow:
		0 .33em 2em rgba(0,0,0,.67) inset,
		1px 1px 0 rgba(255,255,255,.25) inset, 
		-1px -1px 0 rgba(255,255,255,.25) inset;
	box-shadow:
		0 .33em 2em rgba(0,0,0,.67) inset,
		1px 1px 0 rgba(255,255,255,.25) inset, 
		-1px -1px 0 rgba(255,255,255,.25) inset;
}
.button.bg, .button.bg:hover, .button.bg:focus {
	background-image: -moz-linear-gradient(top, rgba(255,255,255,.75), rgba(255,255,255,0));
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.75)), to(rgba(255,255,255,0)));
}

/* Colors/Styles */
.button.blue {
	background-color:#9eb4bf;
}
.button.blue:hover {
	background-color:#b4cdda;
}
.button.darkblue {
	background-color:#046;
	color:#fff;
	text-shadow:-1px -1px 0 rgba(0,0,0,.3);
}
.button.darkblue:hover {
	background-color:#00547e;
}
.button.red {
	background-color:#900;
	color:#fff;
	text-shadow:-1px -1px 0 rgba(0,0,0,.3);
}
.button.red:hover {
	background-color:#b30000;
}
.button.pill, .button.pill:before, .button.pill:after {
	-moz-border-radius:1em;
	-webkit-border-radius:1em;
	border-radius:1em;
}
.button.black {
	background-color:#000;
	color:#fff;
	text-shadow:-1px -1px 0 rgba(0,0,0,.3);
}
.button.black:hover {
	background-color:#222;
}
.button.sharp {
	background-image:-moz-linear-gradient(top, rgba(255,255,255,.75), rgba(255,255,255,.33) 50%, transparent 50%, transparent 100%);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, 
		from(rgba(255,255,255,.75)),
		color-stop(0.5, rgba(255,255,255,.33) ),
		color-stop(0.5, transparent ),
		to(transparent)
	);
	background-repeat:repeat-x;
}
.button.small {
	font-size:10px;
}
.button.large {
	font-size:15px;
}
@-moz-document url-prefix(http://) {
	button:after {
		left:-1.25em;
		bottom:.25em;
	}
}